<template>
  <div id="paidTimeOff" class="paid-time-off">
    <div class="title">Paid Time Off</div>
    <div class="content">
      <div class="employee-info-content">
        <div class="avatar-content">
          <img class="avatar-img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1179812116,2860490131&fm=23&gp=0.jpg"/>
        </div>
        <div class="info-content">
          <div class="name"><router-link class="link" to="/views/org/employee/employeeDetail/42594514884126">Nicole Herrera</router-link></div>
          <div class="org"><label class="label">Org：</label> Sales</div>
          <div class="job"><label class="label">Job Title：</label> Sales Engineer</div>
        </div>
        <div class="pto-available">
          <div class="pto-available-item" v-for="(item,key) in ptoPreview" :key="key"><label>{{item.name}}:</label>{{item.avail}}hours</div>
        </div>
      </div>
      <!--table-->
      <div class="pto-content" v-if="ptoModel">
        <div class="pto-content-header">
          <div class="title"><i class="iconfont left-icon" @click="changeWeek('left')">&#xe617;</i>{{currentShow}}<i class="iconfont right-icon" @click="changeWeek('right')">&#xe618;</i></div>
          <div class="sub-title">Week Total: 0 Hours</div>
        </div>
        <Row class="pto-row">
          <i-col class="pto-column" :span="3">
            <div class="pto-item pto-item-date" >Date</div>
            <div class="pto-item">PTO Code</div>
            <div class="pto-item">Hours</div>
          </i-col>
          <i-col class="pto-column" :span="3" v-for="(item,key) in weekObj" :key="key">
            <div class="pto-item pto-item-date" >{{item.title}}</div>
            <div class="pto-item pto-item-select">
              <Select  placeholder="select" v-model.number= ptoModel[key].code>
                <Option v-for="(item,key) in ptoList" :key="key" :value="item.id">{{item.code}}</Option>
              </Select>
            </div>
            <div class="pto-item pto-item-input">
              <input v-model.number= ptoModel[key].hours class="" type="number" >
            </div>
          </i-col>
        </Row>
      </div>
      <div class="footer">
        <button v-touch-ripple type="button">Reset</button> <button v-touch-ripple  type="button">Cancel</button> <button @click="applyPto" v-touch-ripple class="active"  type="button">Save</button>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'PaidTimeOff',
    components:{

    },
    created(){
    	this.init();
    },
    data () {
      return {
        currentShow:'',
        PTOCodeModel:{},
        weekObj :[],
        firstDayOfWeek:null,
        ptoModel:[],
      }
    },
    watch:{
      firstDayOfWeek(value){
        if(value){
          this.currentShow = moment(value).format('MMM DD - ') + moment(value).add(6,'days').format('MMM DD / YYYY');
          this.initWeek();
        }
      },
      'ptoModel'(value){
         console.log(value)
      }
    },
    computed:{
      ptoPreview(){
      	return this.$store.getters.ptoPreview;
      },
      ptoList(){
        return this.$store.getters.ptoList;
      },
      totalHours(){
        var sum=0;
        for(var i = 0;i< this.ptoModel.length;i++){
            if(this.ptoModel[i].hours){
              sum+= this.ptoModel[i].hours;
            }
        }
        return sum;
      }
    },
    methods:{
    	init(){
        this.firstDayOfWeek = moment().startOf('week').format('YYYY-MM-DD');
    		this.getPtoPreview();
    		this.getPtoList();
      },
      getPtoPreview(){
        this.$store.dispatch('getPtoPreview',{employees:''});
      },
      getPtoList(){
        this.$store.dispatch('getPtoList',{employees:''});
      },
      initWeek(){
        this.weekObj=[];
        this.ptoModel = [];
        for(var i=0;i<7;i++){
        	var title = moment(this.firstDayOfWeek).add(i,'days').format('ddd M/D');
        	var key = moment(this.firstDayOfWeek).add(i,'days').format('YYYY-MM-DD');
          this.weekObj.push({
            title:title,
            key:key,
          });
          this.ptoModel[i]  = {
           //employee:null
           //code:null, //PTO Code 主键	Number
           date:key, //PTO 日期	String	YYYY-MM-DD
           //hours:null, //PTO 时长	Number	单位小时
          };
        }
      },
      changeWeek(type){
        if(this.totalHours){
          this.$Modal.confirm({
            title: 'Save changes?',
            content: 'There are changes that have not been saved.',
            onOk: () => {
              this.applyPto();
            },
            onCancel: () => {
              this.firstDayOfWeek = moment(this.firstDayOfWeek)[type=='right'?'add':'subtract'](7,'days');
            }
          });
        }else{
          this.firstDayOfWeek = moment(this.firstDayOfWeek)[type=='right'?'add':'subtract'](7,'days');
        }
      },
      applyPto(){
        var paramData = JSON.parse(JSON.stringify(this.ptoModel));
        var condition=[];
        for(var i = 0;i<paramData.length;i++ ){
            if(paramData[i].hours){
              condition.push(paramData[i]);
            }
        }
        paramData = condition;
        this.$store.dispatch('applyPto',paramData).then(
          ()=>{
            this.getPtoPreview();
            this.getPtoList();
            this.$Message.success('success');
          }
        );
      }
    }
  }
</script>

<style  rel="stylesheet/scss" type="text/css" lang="scss" >
  @import "src/assets/css/variable.scss";
  #paidTimeOff{
    >.title{

    }
    >.content{
      .employee-info-content{
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 13px 0px 52px 40px;
        >.avatar-content{
          flex: 0;
          .avatar-img{
            width: 68px;
            height: 68px;
            border-radius: 50%;
            margin-right: 31px;
          }
        }
        >.info-content{
          flex: 3;
          >.name{
            .link{
             /* font-family: PingFangTC-Medium;*/
              font-size: 18px;
              color: #009AFF;
              border-bottom: 1px $baseColor solid;
              margin-bottom: 4px;
            }
          }
          >.org,.job{
            margin-bottom: 4px;
           /* font-family: PingFangTC-Regular;*/
            font-size: 14px;
            color: #14252E;
            >.label{
              color: #96ACB9;
            }
          }
        }
        .pto-available{
          flex:2;
          padding-left: 20px;
          border-left:  1px dotted #96ACB9;
          .pto-available-item{
            line-height: 17px;
            margin-bottom: 7px;
            font-size: 12px;
            color: #96ACB9;
            >label{
              display: inline-block;
              width:150px;
            }
          }
        }
      }

      .pto-content{
        border-top: 1px $baseBorderColor solid;
        border-left: 1px $baseBorderColor solid;
        margin-bottom: 60px;
        .pto-content-header{
          background-color: #f1f8ff;
          text-align: center;
          padding: 14px 0;
          border-right: 1px $baseBorderColor solid ;
          >.title{
            font-size: 18px;
            color: #325570;
            line-height: 25px;
            .left-icon,.right-icon{
              margin: 0 20px;
              font-size: 12px;
              padding: 4px;
              vertical-align: middle;
              border: 1px $baseBorderColor solid;
              border-radius: 2px;
              &:hover{
                opacity: .5;
              }
            }
          }
          >.sub-title{
            font-size: 14px;
            color: #96ACB9;
            line-height: 20px;
          }
        }
        .pto-row{
          line-height: 40px;
          .pto-item{
            height: 52px;
            line-height: 52px;
            font-size: 14px;
            color: #325570;
            border-right: 1px $baseBorderColor solid;
            border-bottom: 1px $baseBorderColor solid;
            padding: 0 12px;
            &.pto-item-date{
              font-size: 14px;
              color: #96ACB9;
            }
            &.pto-item-select{
              padding: 0;
              .ivu-select-selection{
                border: 0;
              }
              .ivu-select-visible .ivu-select-selection{
                box-shadow: 0 0 0 0 rgba(0,0,0,0);
              }
            }
            &.pto-item-input{
              padding: 0;
              input{
                width: 100%;
                height: 99%;
                border: 0;
                padding: 0 12px;
              }
            }
          }
        }
      }
      /*footer*/

      .footer{
        text-align: right;
        button{
          width: 100px;
          height: 38px;
          margin-left: 30px;
          font-size: 16px;
          color: #96ACB9;
          background-color: #fff;
          border: 1px solid $baseBorderColor;
          border-radius: 4px;
          outline: 0;
          cursor: pointer;
          &.active{
            background-color: $baseColor;
            color: #fff;
            border: 0;
          }
          &:hover{
            opacity: .7;
          }
        }
      }
    }
  }
</style>
